<template>
  <div class="step4 step-wrap">
    <div class="step-content">
      <p class="step-title">重构连接</p>
      <div class="step-text">
        <p class="scene-title" :class="{ 'scene-hidden': titleHidden }">
          <a-popover
            transitionName=""
            v-for="(word, i) in renderHtml"
            :key="word + i"
            overlayClassName="lookup-popover"
            placement="bottom"
            :visible="visibles[i]"
            :destroyTooltipOnHide="true"
            trigger="click"
          >
            <span :cf_attr="viLock?'disable':''" :id="`step4-word${i}`" class="synclock" @click.stop="checkWord(word, i)">{{ word }}</span>
            <div slot="content">
              <div class="lookup-content">
                <div class="title">
                  {{ translate.word || translate.word }}
                  <img
                    v-show="translate.word"
                    class="icon-img"
                    @click.stop="translateVoice"
                    src="@/assets/reverse/audio-play1.png"
                    alt=""
                  />
                </div>
                <div class="translate">
                  {{ translate.translation || "未找到该生词" }}
                </div>
                <div class="btn-group">
<!--                  <a :disabled="!translate.prototype_word" @click.stop="addWord"-->
<!--                    ><img-->
<!--                      class="icon-img"-->
<!--                      src="@/assets/reverse/add1.png"-->
<!--                      alt=""-->
<!--                    />添加生词</a-->
<!--                  >-->
<!--                  <a @click="translateDetail"-->
<!--                    ><img-->
<!--                      class="icon-img"-->
<!--                      src="@/assets/reverse/detail1.png"-->
<!--                      alt=""-->
<!--                    />单词详解</a-->
<!--                  >-->
                </div>
              </div>
            </div>
          </a-popover>
        </p>
        <p class="scene-translation">
          {{ data.translation }}
        </p>
      </div>
      <div class="play-btn" @click="translateToggle">
        <img
          v-show="titleHidden"
          src="@/assets/reverse/translate-round-zh.png"
          alt=""
        />
        <img
          v-show="!titleHidden"
          src="@/assets/reverse/translate-round-all.png"
          alt=""
        />
      </div>
    </div>
    <div class="step1-bottom step-bottom">
      <img
        @click="changeTab('pre')"
        src="@/assets/reverse/left-arrow-round.png"
        alt=""
      />
      <span>尝试复述</span
      >
      <el-button @click="go('ok')" type="primary">会</el-button>
      <el-button @click="go('no')" type="danger">不会</el-button>
<!--      <img-->
<!--        @click="changeTab('next')"-->
<!--        src="@/assets/reverse/right-arrow-round.png"-->
<!--        alt=""-->
<!--      />-->
    </div>
  </div>
</template>

<script>
import { Popover } from "ant-design-vue";
// import { checkWord, addWord } from "@/services/reverse";
// import { SUCCESS_CODE } from "@/utils/const";
// import { mapMutations } from "vuex";
import $ from 'jquery'
import {mapMutations, mapState} from "vuex";
import {checkWord, getStart, getStudyOver} from "@/api/reverse";
export default {
  components: {
    APopover: Popover,
  },
  data() {
    return {
      viLock: false,
      lastvi: "",
      visibles: {},
      data: {},
      translate: {},
      titleHidden: true,
    };
  },
  props: {
    renderData: {
      type: Object,
    },
    tabKey: {
      type: Number,
    },
    sentenceCurrent: {
      type: Object,
    },
  },
  computed: {
    ...mapState(["reverseStatus"],{
    }),
    renderHtml: function() {
      return this.data.word.split(" ");
    },
  },
  watch: {
    renderData: {
      handler: function(val) {
        this.data = val.list.find((v) => v.id === this.sentenceCurrent.id);
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    ...mapMutations(["setSentenceList"]),
        outPopClick(oi) {
      if (typeof oi == "object") {
        if (this.visibles[this.lastvi] == true) {
          $(".ant-popover-open").trigger("click");
        }
      } else {
        for (let i in this.visibles) {
          if (typeof oi == "string" && oi == i) continue;
          this.visibles[i] = false;
        }
      }
    },
    changeTab(cmd) {
      this.$emit("changeTab", cmd);
    },
    replaceText(word) {
      const pattern =  /[^a-zA-Z']/g;
      return word.replace(pattern, "");
    },
    checkWord(value, i) {
      i = Number(i).toString();
      this.outPopClick(i);
      this.lastvi = i;
      if (!value || this.viLock) return;
      this.viLock = true;
      checkWord({ word: value }).then((res) => {
        this.translate = res.data;
        this.visibles[i] = !this.visibles[i];
        this.viLock = false;
      });
    },
   async go(type){
          let data ={
            courseId:this.reverseStatus.curr_id,
            userId:this.reverseStatus.userId,
            packageId:this.reverseStatus.packageId,
            gid:this.data.id,
            pass:type === 'ok'?1:2
          }
       await getStudyOver(data).then((res)=>{
         this.$message.success(res.message)
         this.$router.push({
           path: '/reverse/grammar-sentence',
           query:{
             userId:this.reverseStatus.userId
           }
         })
       })
     let datas = {
       courseId:this.reverseStatus.curr_id,
       userId:this.reverseStatus.userId,
       packageId:this.reverseStatus.packageId,
     }
     await getStart(data).then((res)=>{
       let press =  {
         "type": 0,
         "last_answer": 0,
         "url": "",
         "test": [],
         "voice_rate_1": [{
           "number": "1",
           "time": "2",
           "speed": "1",
           "set": "0"
         }, {
           "number": "2",
           "time": "2",
           "speed": "0.8",
           "set": "0"
         }, {
           "number": "3",
           "time": "2",
           "speed": "1",
           "set": "0"
         }],
         "voice_rate_2": [{
           "number": "1",
           "time": "1",
           "speed": "1",
           "set": "0"
         }, {
           "number": "2",
           "time": "1",
           "speed": "0.8",
           "set": "0"
         }, {
           "number": "3",
           "time": "1",
           "speed": "1",
           "set": "0"
         }],
         "voice_rate_3": [{
           "number": "1",
           "time": "2",
           "speed": "1",
           "set": "0"
         }, {
           "number": "2",
           "time": "2",
           "speed": "0.8",
           "set": "0"
         }, {
           "number": "3",
           "time": "2",
           "speed": "1",
           "set": "0"
         }],
         "voice_rate_4": [{
           "number": "1",
           "time": "2",
           "speed": "1",
           "set": "0"
         }, {
           "number": "2",
           "time": "2",
           "speed": "0.8",
           "set": "0"
         }, {
           "number": "3",
           "time": "2",
           "speed": "1",
           "set": "0"
         }],
         "voice_rate_5": [{
           "number": "1",
           "time": "1",
           "speed": "1",
           "set": "0"
         }, {
           "number": "2",
           "time": "1",
           "speed": "0.8",
           "set": "0"
         }, {
           "number": "3",
           "time": "1",
           "speed": "1",
           "set": "0"
         }],
         "correlation": 0
       };
       const data = Object.values(res.data);
       let list = data.map((v) => ({
         ...v,
         clickNum: 0
       }));
       let sentenceList = {
         list,
         ...press,
       };
       this.setSentenceList(sentenceList);
     })
    },
    addWord() {
      addWord({
        prototype_word: this.translate.prototype_word,
        select_word: this.translate.select_word,
        question_type: 3,
        is_diff: "0",
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.$message.success("添加生词成功");
        }
      });
    },
    translateVoice() {
      let audio = document.getElementById("reverse-audio");
      audio.src = this.translate.voiceUrl;
      this.audio.addEventListener('canplay',()=>{
        this.audio.play();
      })
    },
    translateDetail() {
      this.setTranslateModal({
        visible: true,
        word: this.translate.select_word,
      });
      document.getElementById("app").click();
    },
    translateToggle() {
      this.titleHidden = !this.titleHidden;
    },
  },
  created() {
    document.body.addEventListener("click", this.outPopClick);
  },
  mounted() {
    console.log(this.data);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    document.body.removeEventListener("click", this.outPopClick);
  },
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
@import url("step.css");
</style>
